// lazy用于做组件懒加载的
// lazy配合Suspense组件一起使用
import React, { Component, lazy, Suspense } from "react";

// import Child from "./Child";
const Child = lazy(() => import("./Child"));

class App extends Component {
  state = {
    show: false,
  };
  fn = () => {
    this.setState({
      show: true,
    });
  };
  render() {
    return (
      <>
        <h2>组件懒加载</h2>
        <button onClick={this.fn}>btn</button>
        {/* fallback属性里面添加一段html */}
        {/* 会在里面的组件的加载过程中显示 */}
        <Suspense fallback={<div>loading...</div>}>
          {this.state.show && <Child />}
        </Suspense>
      </>
    );
  }
}

export default App;
